<script setup>
import { ref, computed, onMounted, watch, onUnmounted } from 'vue'
import { Howl, Howler } from 'howler'
import { ElMessage } from 'element-plus'
import defaultCoverImage from '@/assets/cover.jpg'
import { usePlayerStore, useMusicStore, usePlaylistStore } from '@/store'
import { likeMusic } from '@/api/music'
import PlaylistPanel from '@/components/PlaylistPanel.vue'
import { baseURL } from '@/utils/request'

// 播放器状态
const playerStore = usePlayerStore()
const musicStore = useMusicStore()  // 使用音乐存储
const playlistStore = usePlaylistStore() // 使用播放列表 store
const isPlaying = computed(() => playerStore.isPlaying)
const currentTime = ref(0)
const duration = ref(0)
const isLiked = ref(false)
const defaultCover = defaultCoverImage
// 添加拖动状态变量
const isDragging = ref(false)

// 当前播放歌曲
const currentSong = computed(() => playerStore.currentSong)

// 从 musicStore 中获取当前歌曲的喜欢状态
const isLikedComputed = computed(() => {
  if (!currentSong.value.id) return false
  
  // 在整个音乐库中查找当前歌曲
  const songInStore = musicStore.allMusic.find(song => song.id === currentSong.value.id);
  if (songInStore) {
    return songInStore.isFavorite === 1
  }
  
  // 回退到 currentSong 中的状态
  return currentSong.value.isFavorite === 1
})

// Howler实例
let sound = null
// 进度更新计时器
let progressTimer = null

// 计算进度百分比
const progressPercent = computed(() => {
  return (currentTime.value / duration.value) * 100 || 0
})

// 初始化音频
const initializeAudio = () => {
  // 销毁之前的实例
  if (sound) {
    sound.unload()
  }
  
  // 确保URL是完整路径
  const audioUrl = currentSong.value.url.startsWith('http') 
    ? currentSong.value.url 
    : `${baseURL}${currentSong.value.url}`
  
  // 创建新的Howl实例
  sound = new Howl({
    src: [audioUrl],
    html5: true, // 使用HTML5 Audio以允许流式传输
    preload: true,
    onload: () => {
      console.log('音频已加载')
      duration.value = sound.duration()
    },
    onplay: () => {
      // 使用直接赋值而不是通过方法更新状态，避免潜在的循环
      if (!playerStore.isPlaying) {
        playerStore.isPlaying = true
      }
      startProgressTimer()
    },
    onpause: () => {
      if (playerStore.isPlaying) {
        playerStore.isPlaying = false
      }
      clearProgressTimer()
    },
    onstop: () => {
      playerStore.isPlaying = false
      clearProgressTimer()
    },
    onend: () => {
      // 歌曲播放结束时自动播放下一首
      onSongEnded()
    },
    onloaderror: (id, error) => {
      console.error('音频加载错误:', error)
    },
    onplayerror: (id, error) => {
      console.error('音频播放错误:', error)
      // 尝试重新加载
      sound.once('unlock', () => {
        sound.play()
      })
    },
    onseek: () => {
      // 现有代码...
    }
  })
}

// 更新进度定时器
const startProgressTimer = () => {
  clearProgressTimer()
  progressTimer = setInterval(() => {
    if (sound && sound.playing() && !isDragging.value) {
      currentTime.value = sound.seek() || 0
    }
  }, 50)
}

const clearProgressTimer = () => {
  if (progressTimer) {
    clearInterval(progressTimer)
    progressTimer = null
  }
}

// 播放/暂停切换 - 更新为更安全的实现
const togglePlay = () => {
  if (!sound) return
  
  if (sound.playing()) {
    sound.pause()
  } else {
    sound.play()
  }
  // Howl的onplay/onpause回调会处理状态更新
}

// 喜欢/取消喜欢
const toggleLike = async () => {
  if (!currentSong.value.id) return // 如果没有正在播放的歌曲，直接返回
  
  const response = await likeMusic(currentSong.value.id)
  if (response.status === 0) {
    // 更新当前歌曲的喜欢状态
    const newLikedStatus = currentSong.value.isFavorite === 1 ? 0 : 1
    currentSong.value.isFavorite = newLikedStatus
    
    // 显示成功信息
    ElMessage.success(
      newLikedStatus === 1 
        ? '已添加到我喜欢的音乐' 
        : '已从我喜欢的音乐中移除'
    )
    
    // 使用 musicStore 更新所有相关列表中的状态
    musicStore.updateSongLikeStatus(currentSong.value.id, newLikedStatus === 1)
    
    // 更新播放列表中的状态
    if (playerStore.playlist && playerStore.playlist.value) {
      const songInPlaylist = playerStore.playlist.value.find(
        song => song && song.id === currentSong.value.id
      )
      if (songInPlaylist) {
        songInPlaylist.isFavorite = newLikedStatus
      }
    }
    
    // 重新获取音乐列表以更新所有视图
    await musicStore.fetchAllMusic()
  } else {
    ElMessage.error(response.message)
  }
}

// 播放上一首歌曲
const playPrevious = () => {
  // 获取当前歌曲在播放列表中的索引
  const currentIndex = playlistStore.currentSongIndex
  
  // 如果播放列表为空或者只有一首歌曲，则无法切换
  if (playlistStore.playlist.length <= 1) {
    if (playlistStore.playlist.length === 1) {
      // 如果只有一首歌曲，则重新播放当前歌曲
      const currentSong = playlistStore.playlist[0]
      playlistStore.playFromPlaylist(currentSong)
    } else {
      // 播放列表为空，提示用户
      ElMessage.info('播放列表为空，请先添加歌曲')
    }
    return
  }
  
  // 计算上一首歌曲的索引（循环播放）
  const prevIndex = currentIndex <= 0 ? playlistStore.playlist.length - 1 : currentIndex - 1
  
  // 获取上一首歌曲
  const prevSong = playlistStore.playlist[prevIndex]
  
  // 播放上一首歌曲
  if (prevSong) {
    playlistStore.playFromPlaylist(prevSong)
  }
}

// 播放下一首歌曲
const playNext = () => {
  // 获取当前歌曲在播放列表中的索引
  const currentIndex = playlistStore.currentSongIndex
  
  // 如果播放列表为空或者只有一首歌曲，则无法切换
  if (playlistStore.playlist.length <= 1) {
    if (playlistStore.playlist.length === 1) {
      // 如果只有一首歌曲，则重新播放当前歌曲
      const currentSong = playlistStore.playlist[0]
      playlistStore.playFromPlaylist(currentSong)
    } else {
      // 播放列表为空，提示用户
      ElMessage.info('播放列表为空，请先添加歌曲')
    }
    return
  }
  
  // 计算下一首歌曲的索引（循环播放）
  const nextIndex = (currentIndex + 1) % playlistStore.playlist.length
  
  // 获取下一首歌曲
  const nextSong = playlistStore.playlist[nextIndex]
  
  // 播放下一首歌曲
  if (nextSong) {
    playlistStore.playFromPlaylist(nextSong)
  }
}

// 可以添加一个函数，用于在歌曲播放完毕时自动播放下一首
const onSongEnded = () => {
  playNext()
}

// 时间格式化
const formatTime = (time) => {
  if (isNaN(time) || time === 0) return '00:00'
  const minutes = Math.floor(time / 60)
  const seconds = Math.floor(time % 60)
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
}

// 进度条点击事件处理
const seek = (event) => {
  if (!sound) return

  const progressBar = event.currentTarget
  const clickPosition = event.offsetX
  const barWidth = progressBar.clientWidth
  const seekTime = (clickPosition / barWidth) * duration.value
  
  // 设置新的播放位置
  sound.seek(seekTime)
  currentTime.value = seekTime
}

// 添加进度条拖动事件处理
const startDrag = (event) => {
  if (!sound) return
  
  // 立即暂停定时器更新，避免干扰
  clearProgressTimer()
  isDragging.value = true
  
  // 为整个文档添加事件监听器，确保即使鼠标离开thumb也能捕获
  document.addEventListener('mousemove', dragProgress)
  document.addEventListener('mouseup', stopDrag, true)
  
  // 立即更新进度
  dragProgress(event)
  
  // 阻止事件冒泡和默认行为
  event.preventDefault()
  event.stopPropagation()
}

const dragProgress = (event) => {
  if (!isDragging.value || !sound) return
  
  const progressBar = document.querySelector('.progress-bar')
  if (!progressBar) return
  
  const rect = progressBar.getBoundingClientRect()
  // 计算相对位置并限制在0-1范围内
  let ratio = (event.clientX - rect.left) / rect.width
  ratio = Math.max(0, Math.min(1, ratio))
  
  // 只更新显示值
  currentTime.value = ratio * duration.value
}

const stopDrag = (event) => {
  // 首先阻止任何默认行为和事件冒泡
  if (event) {
    event.preventDefault()
    event.stopPropagation()
  }
  
  if (!isDragging.value || !sound) {
    isDragging.value = false
    return
  }
  
  // 保存当前时间值，防止在状态更新过程中被修改
  const seekTime = Math.max(0, Math.min(currentTime.value, duration.value))
  
  // 先更新状态标志
  isDragging.value = false
  
  // 强制设置视觉反馈，防止跳回
  currentTime.value = seekTime
  
  // 设置新的播放位置
  sound.seek(seekTime)
  
  // 确保音频继续播放（如果之前是播放状态）
  if (playerStore.isPlaying && !sound.playing()) {
    sound.play()
  }
  
  // 延迟一点启动进度更新定时器，确保seek操作完成
  setTimeout(() => {
    if (playerStore.isPlaying) {
      startProgressTimer()
    }
  }, 50)
  
  // 移除事件监听器
  document.removeEventListener('mousemove', dragProgress)
  document.removeEventListener('mouseup', stopDrag, true) // 要匹配添加时的捕获设置
}

// 音量控制相关
const volume = ref(1) // 音量值，范围 0-1
const showVolumeSlider = ref(false)

// 监听音量变化
watch(volume, (newValue) => {
  if (sound) {
    Howler.volume(newValue)
  }
})

// 切换静音
const toggleMute = () => {
  if (volume.value > 0) {
    volume.value = 0
  } else {
    volume.value = 1
  }
}

// 添加一个函数来更新页面标题
const updatePageTitle = () => {
  if (playerStore.currentSong.id && playerStore.isPlaying) {
    document.title = `▶️ ${playerStore.currentSong.name}`
  } else {
    // 没有歌曲时显示默认标题
    document.title = '𝓣𝓱𝓮𝓶𝓫𝓮𝓻𝓯𝓾𝓮'
  }
}

// 监听歌曲变化
watch(() => playerStore.currentSong, updatePageTitle, { deep: true })

// 监听播放状态变化
watch(() => playerStore.isPlaying, updatePageTitle)

// 当组件挂载时初始化音频
onMounted(() => {
  // 移除手动恢复播放状态的代码，由Pinia自动处理
  initializeAudio()
  
  // 设置全局音量
  Howler.volume(volume.value)
  
  // 添加初始标题设置
  updatePageTitle()
})

// 清理资源
onUnmounted(() => {
  clearProgressTimer()
  // 确保移除可能的事件监听器
  document.removeEventListener('mousemove', dragProgress)
  document.removeEventListener('mouseup', stopDrag)
  if (sound) {
    sound.unload()
    sound = null
  }
  
  // 组件卸载时恢复原始标题
  document.title = '音乐播放器'
})

// 监听歌曲变化
watch(() => playerStore.currentSong.url, (newUrl) => {
  if (newUrl) {
    initializeAudio()
    if (playerStore.isPlaying) {
      sound.play()
    }
  }
})

// 监听播放状态变化
watch(() => playerStore.isPlaying, (isPlaying, oldIsPlaying) => {
  if (!sound || isPlaying === oldIsPlaying) return
  
  // 使用防抖动技术避免多次快速切换状态
  if (isPlaying) {
    if (!sound.playing()) {
      sound.play()
    }
  } else {
    if (sound.playing()) {
      sound.pause()
    }
  }
}, { flush: 'post' }) // 使用post确保DOM更新后再执行

// 新增音量拖动相关变量和方法
const isVolumeDragging = ref(false)
const volumeBarBg = ref(null)

// 切换音量滑块显示
const toggleVolumeSlider = () => {
  if (volume.value === 0) {
    // 如果当前是静音，点击恢复到上次的音量
    volume.value = 0.5
  } else {
    // 如果不是静音状态，则切换音量滑块显示
    showVolumeSlider.value = !showVolumeSlider.value
  }
}

// 开始拖动音量滑块
const startVolumeDrag = (event) => {
  isVolumeDragging.value = true
  document.addEventListener('mousemove', dragVolume)
  document.addEventListener('mouseup', stopVolumeDrag)
  dragVolume(event) // 立即调用一次，使控制点跟随鼠标
}

// 拖动音量滑块
const dragVolume = (event) => {
  if (!isVolumeDragging.value || !volumeBarBg.value) return
  
  const rect = volumeBarBg.value.getBoundingClientRect()
  // 计算相对位置并限制在0-1范围内（注意这里是垂直方向）
  // 0在底部，1在顶部，所以需要用总高度减去鼠标位置
  let newVolume = 1 - ((event.clientY - rect.top) / rect.height)
  newVolume = Math.max(0, Math.min(1, newVolume))
  
  volume.value = newVolume
}

// 通过点击设置音量
const setVolumeByClick = (event) => {
  if (!volumeBarBg.value) return
  
  const rect = volumeBarBg.value.getBoundingClientRect()
  // 计算相对位置并限制在0-1范围内
  let newVolume = 1 - ((event.clientY - rect.top) / rect.height)
  newVolume = Math.max(0, Math.min(1, newVolume))
  
  volume.value = newVolume
}

// 停止拖动音量滑块
const stopVolumeDrag = () => {
  isVolumeDragging.value = false
  document.removeEventListener('mousemove', dragVolume)
  document.removeEventListener('mouseup', stopVolumeDrag)
}

// 简化播放列表相关变量
const showPlaylist = ref(false)

// 切换播放列表显示
const togglePlaylist = () => {
  showPlaylist.value = !showPlaylist.value
}

// 添加点击外部关闭事件
onMounted(() => {
  // 现有代码
  initializeAudio()
  Howler.volume(volume.value)
  updatePageTitle()
})

// 移除事件监听
onUnmounted(() => {
  // 现有代码
  clearProgressTimer()
  document.removeEventListener('mousemove', dragProgress)
  document.removeEventListener('mouseup', stopDrag)
  if (sound) {
    sound.unload()
    sound = null
  }
  document.title = '𝓣𝓱𝓮𝓶𝓫𝓮𝓻𝓯𝓾𝓮'
})
</script>

<template>
  <div class="player-container">
    <!-- 主播放器 -->
    <div class="player-content">
      <!-- 左侧：歌曲信息 -->
      <div class="song-info">
        <div class="cover-art" :class="{ 'rotating': isPlaying }">
          <img :src="currentSong.coverUrl || defaultCover" alt="封面">
        </div>
        <div class="song-details">
          <div class="song-title-wrapper">
            <span class="vip-tag">VIP</span>
            <span class="song-title">{{ currentSong.name }}</span>
          </div>
          <div class="song-artist">{{ currentSong.artist }}</div>
        </div>
      </div>
      
      <!-- 中间控制区域 -->
      <div class="center-controls">
        <!-- 播放控制按钮 -->
        <div class="control-buttons">
          <!-- 收藏按钮 -->
          <button class="action-btn like-btn" :class="{ 'liked': isLikedComputed }" @click="toggleLike">
            <svg width="21" height="21" viewBox="0 0 24 24" :fill="isLikedComputed ? '#ff4e4e' : 'none'" :stroke="isLikedComputed ? 'none' : '#ffffff'" stroke-width="2">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
          </button>
          
          <!-- 上一首按钮 -->
          <button class="control-btn prev" @click="playPrevious">
            <svg width="21" height="21" viewBox="0 0 1024 1024" fill="white" style="transform: scaleX(-1)">
              <path d="M192 899.072c-5.632 0-11.264-1.536-15.872-4.096-9.728-5.632-15.872-16.384-15.872-27.648V159.232c0-11.264 6.144-22.016 15.872-27.648 9.728-5.632 22.016-5.632 31.744 0l612.864 353.792c9.728 5.632 15.872 16.384 15.872 27.648s-6.144 22.016-15.872 27.648L207.872 894.464c-4.608 3.072-10.24 4.608-15.872 4.608z"/>
              <path d="M837.12 898.56h-60.416c-15.36 0-27.648-12.288-27.648-27.648V155.136c0-15.36 12.288-27.648 27.648-27.648h60.416c15.36 0 27.648 12.288 27.648 27.648V870.4c0 15.872-12.288 28.16-27.648 28.16z"/>
            </svg>
          </button>
          
          <!-- 播放/暂停按钮 -->
          <button class="control-btn play-pause" @click="togglePlay">
            <svg v-if="playerStore.isPlaying" width="21" height="21" viewBox="0 0 1024 1024" fill="white">
              <path d="M321.536 898.56H255.488c-22.016 0-39.424-17.408-39.424-39.424V166.912c0-22.016 17.408-39.424 39.424-39.424h66.048c22.016 0 39.424 17.408 39.424 39.424v692.224c0 21.504-17.408 39.424-39.424 39.424zM768 898.56h-66.048c-22.016 0-39.424-17.408-39.424-39.424V166.912c0-22.016 17.408-39.424 39.424-39.424H768c22.016 0 39.424 17.408 39.424 39.424v692.224c0.512 21.504-17.408 39.424-39.424 39.424z"/>
            </svg>
            <svg v-else width="21" height="21" viewBox="0 0 1024 1024" fill="white">
              <path d="M257.024 899.072c-5.632 0-11.264-1.536-15.872-4.096-9.728-5.632-15.872-16.384-15.872-27.648V159.232c0-11.264 6.144-22.016 15.872-27.648 9.728-5.632 22.016-5.632 31.744 0L885.76 485.376c9.728 5.632 15.872 16.384 15.872 27.648s-6.144 22.016-15.872 27.648L273.408 894.464c-5.12 3.072-10.752 4.608-16.384 4.608z"/>
            </svg>
          </button>
          
          <!-- 下一首按钮 -->
          <button class="control-btn next" @click="playNext">
            <svg width="21" height="21" viewBox="0 0 1024 1024" fill="white">
              <path d="M192 899.072c-5.632 0-11.264-1.536-15.872-4.096-9.728-5.632-15.872-16.384-15.872-27.648V159.232c0-11.264 6.144-22.016 15.872-27.648 9.728-5.632 22.016-5.632 31.744 0l612.864 353.792c9.728 5.632 15.872 16.384 15.872 27.648s-6.144 22.016-15.872 27.648L207.872 894.464c-4.608 3.072-10.24 4.608-15.872 4.608z"/>
              <path d="M837.12 898.56h-60.416c-15.36 0-27.648-12.288-27.648-27.648V155.136c0-15.36 12.288-27.648 27.648-27.648h60.416c15.36 0 27.648 12.288 27.648 27.648V870.4c0 15.872-12.288 28.16-27.648 28.16z"/>
            </svg>
          </button>
        </div>
        
        <!-- 进度条区域 -->
        <div class="progress-area">
          <div class="time current">{{ formatTime(currentTime) }}</div>
          <div class="progress-bar" @click="seek">
            <div class="progress" :style="{ width: progressPercent + '%' }"></div>
            <div class="progress-thumb" 
                :style="{ left: progressPercent + '%' }"
                @mousedown.prevent="startDrag"></div>
          </div>
          <div class="time total">{{ formatTime(duration) }}</div>
        </div>
      </div>
      
      <!-- 右侧控制区域 -->
      <div class="right-controls">
        <!-- 音量控制 -->
        <div class="volume-control">
          <div class="volume-container" v-show="showVolumeSlider" @mouseleave="showVolumeSlider = false">
            <div class="volume-slider-wrapper">
              <!-- 音量滑块底部 -->
              <div class="volume-slider-bg" ref="volumeBarBg" @click="setVolumeByClick">
                <!-- 音量滑块已填充部分 -->
                <div class="volume-slider-fill" :style="{ height: `${volume * 100}%` }"></div>
                <!-- 音量滑块控制点 -->
                <div class="volume-slider-handle" 
                     :style="{ bottom: `calc(${volume * 100}% - 7px)` }"
                      @mousedown.prevent="startVolumeDrag"></div>
              </div>
            </div>
          </div>
          <!-- 音量图标按钮 -->
          <button class="volume-btn" @click="toggleVolumeSlider">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path v-if="volume > 0" d="M11 5L6 9H2v6h4l5 4zM15.54 8.46a5 5 0 0 1 0 7.07M18.07 5.93a8 8 0 0 1 0 12.14"></path>
              <path v-else d="M11 5L6 9H2v6h4l5 4zM22 9l-6 6M16 9l6 6"></path>
            </svg>
          </button>
        </div>

        <!-- 播放列表按钮 -->
        <button class="playlist-btn" @click="togglePlaylist">
          <svg viewBox="0 0 1024 1024" width="24" height="24" fill="currentColor">
            <path d="M988.3 488.2c-85.3 0-154.8-69.4-154.8-154.8 0-19.7-16-35.7-35.7-35.7-19.7 0-35.7 16-35.7 35.7v233.3c-37.9-34-88-54.7-142.9-54.7-118.2 0-214.3 96.1-214.3 214.3S501 940.7 619.2 940.7c118.2 0 214.3-96.1 214.3-214.3 0-8.6-0.5-17.1-1.5-25.4 1-3.3 1.5-6.7 1.5-10.3V498.2c40.5 38.1 95 61.4 154.8 61.4 19.7 0 35.7-16 35.7-35.7 0-19.7-16-35.7-35.7-35.7z m-369.1 381c-78.8 0-142.9-64.1-142.9-142.9s64.1-142.9 142.9-142.9S762 647.5 762 726.3s-64 142.9-142.8 142.9zM35.7 154.8h762c19.7 0 35.7-16 35.7-35.7s-16-35.7-35.7-35.7h-762C16 83.3 0 99.3 0 119.1s16 35.7 35.7 35.7zM35.7 369.1h619.2c19.7 0 35.7-16 35.7-35.7s-16-35.7-35.7-35.7H35.7C16 297.7 0 313.7 0 333.4s16 35.7 35.7 35.7zM297.7 512h-262C16 512 0 528 0 547.7c0 19.7 16 35.7 35.7 35.7h262c19.7 0 35.7-16 35.7-35.7 0-19.7-16-35.7-35.7-35.7-35.7zM297.7 726.3h-262C16 726.3 0 742.3 0 762s16 35.7 35.7 35.7h262c19.7 0 35.7-16 35.7-35.7s-16-35.7-35.7-35.7z" />
          </svg>
        </button>
      </div>
    </div>
    
    <!-- 使用单独封装的播放列表组件 -->
    <PlaylistPanel 
      :is-visible="showPlaylist" 
      @close="showPlaylist = false"
    />
  </div>
</template>

<style scoped>
/* 播放器容器 */
.player-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 66px;
  background-color: #2e2e2e;
  z-index: 1000;
  display: flex;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

/* 播放器内容 */
.player-content {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
}

/* 歌曲信息 */
.song-info {
  display: flex;
  align-items: center;
  width: 280px;
  margin-right: 20px;
  overflow: hidden;
}

.cover-art {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  /* 添加过渡效果，使暂停更平滑 */
  transition: all 0.3s ease;
}

.cover-art.rotating {
  animation: rotate 20s linear infinite;
  /* 使用animation-play-state确保暂停时动画位置保持 */
  animation-play-state: running;
}

.cover-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 确保暂停时平滑停止 */
.cover-art:not(.rotating) {
  animation: rotate 20s linear infinite;
  animation-play-state: paused;
}

.song-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  flex: 1;
}

.song-title-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vip-tag {
  background-color: #7c2422;
  color: #e5c787;
  font-size: 10px;
  padding: 0 4px;
  border-radius: 2px;
  line-height: 14px;
  height: 14px;
  flex-shrink: 0;
}

.song-title {
  font-size: 14px;
  color: #fff;
  font-weight: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.song-artist {
  font-size: 12px;
  color: #9b9b9b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
}

/* 控制按钮 */
.action-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
  padding: 0;
}

.action-btn:hover {
  transform: scale(1.02);
}

.like-btn {
  margin-right: 20px;
}

.like-btn.liked {
  color: #ff4e4e;
}

/* 中间控制区域 */
.center-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 580px;
}

.control-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.control-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0 15px;
  transition: transform 0.2s;
}

.control-btn:hover {
  transform: scale(1.05);
}

.control-btn.play-pause {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #FF3B3B;
  margin: 0 25px;
}

/* 进度条区域 */
.progress-area {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.time {
  font-size: 12px;
  color: #9b9b9b;
  width: 40px;
}

.time.current {
  text-align: right;
  padding-right: 8px;
}

.time.total {
  text-align: left;
  padding-left: 8px;
}

.progress-bar {
  flex: 1;
  height: 5px;
  background-color: #4D4D4D;
  position: relative;
  cursor: pointer;
  border-radius: 10px;
}

.progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #FF3B3B;
}

/* 添加进度条滑块样式 */
.progress-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #FF3B3B;
  cursor: pointer;
  border: 5px solid #ffffff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/* 拖动状态样式 */
.progress-thumb:active {
  cursor: grabbing;
}

/* 鼠标悬停时显示滑块 */
/* .progress-bar:hover .progress-thumb,
.progress-thumb:active {
  display: block;
} */

/* 右侧控制按钮 */
.right-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 120px;
}

.volume-control {
  position: relative;
  margin-left: 20px;
}

.volume-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  opacity: 0.8;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.volume-btn:hover {
  opacity: 1;
}

.volume-container {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 120px;
  background-color: #333;
  border-radius: 15px;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.volume-slider-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.volume-slider-bg {
  position: relative;
  height: 90%;
  width: 4px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  cursor: pointer;
}

.volume-slider-fill {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #FF3B3B; /* 红色填充 */
  border-radius: 2px;
}

.volume-slider-handle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 15px;
  background-color: #FF3B3B;
  border: 5px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.playlist-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  opacity: 0.7;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20px;
}

.playlist-btn:hover {
  opacity: 1;
}

.playlist-btn svg {
  width: 24px;
  height: 24px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .song-info {
    width: 200px;
  }
  
  .right-controls {
    width: 80px;
  }
  
  .control-btn.play-pause {
    margin: 0 15px;
  }
  
  .volume-btn, .playlist-btn {
    margin-left: 12px;
  }
}

@media (max-width: 576px) {
  .song-info {
    width: 130px;
  }
  
  .cover-art {
    width: 36px;
    height: 36px;
  }
  
  .song-title {
    font-size: 12px;
  }
  
  .song-artist {
    font-size: 10px;
  }
  
  .control-btn {
    margin: 0 8px;
  }
  
  .control-btn.play-pause {
    width: 32px;
    height: 32px;
    margin: 0 10px;
  }
  
  .time {
    font-size: 10px;
    width: 32px;
  }
}

/* 添加旋转动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style> 